<template>
  <div class="page-content">
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      lazy-render
      indicator-color="white"
    >
      <van-swipe-item>
        <img src="@/images/swipe1.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/images/swipe2.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/images/swipe3.jpg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="recommlist">
      <div class="recommlist-header">
        <van-icon name="arrow" size="18" color="#1989fa" />
        <div class="text">系统推荐</div>
      </div>
      <div class="recommlist-content">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div
              class="recommlist-box"
              v-for="item in list"
              :key="item"
              @click="toScenicDetail(item.id)"
            >
              <img :src="item.cover_url" alt="" />
              <div class="box-bottom">
                <div class="box-bottom-1">
                  {{ item.scenic_name }}
                </div>
                <div class="box-bottom-2">
                  <div class="box-bottom-2-left">
                    地址：浙江省·{{ item.city }}市
                  </div>
                  <div class="box-bottom-2-right">
                    <van-icon name="star" color="orange" />
                    <div>
                      {{ item.comment_score }} 评论:{{ item.comment_count }}
                    </div>
                  </div>
                </div>
              </div>
              <van-divider />
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script setup>
// 列表加载数据
    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)
    const error = ref(false)
    const pageInt = ref(1)
    const pageNum = ref(0)
    // 下拉刷新数据
    const refreshing = ref(false)
    const onLoad = () => {
      setTimeout(async () => {
        if (refreshing.value) {
          list.value = []
          refreshing.value = false
        }
        const res1 = await request.post({
          url: '/CTRSM/Browse.adub',
          data: { flag: 'getAllScenicCounty', pageInt: pageInt.value }
        })
        if (res1.status === 200) {
          list.value.push(...res1.data.output)
          loading.value = false
          pageNum.value = res1.data.pageNum
          console.log(list.value)
          pageInt.value++
        } else {
          error.value = false
        }
        if (list.value.length >= pageNum.value) {
          finished.value = true
        }
      }, 1000)
    }
    // 下拉刷新
    const onRefresh = () => {
      // 清空列表数据
      finished.value = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true
      pageInt.value = 1
      onLoad()
    }
</script>
<script>
import { ref } from 'vue'
import request from '@/utils/request'
// import isReachBottom from '@/utils/reachBottom'
export default {
  name: 'systemRecomm',
  mounted () {
    // window.addEventListener('scroll', this.scrollBottom, true)
  },
  methods: {
    toScenicDetail (id) {
      this.$router.push('/scenic/' + id)
    }
  }
}
</script>

<style lang="less">
.page-content {
  margin-bottom: 40px;
  .my-swipe .van-swipe-item {
    color: #000;
    text-align: center;

    img {
      height: 200px;
      width: 100%;
    }
  }

  .recommlist {
    margin: 10px 0;

    .recommlist-header {
      margin: 5px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .text {
        color: #1989fa;
        font-size: 18px;
      }
    }

    .recommlist-content {
      .recommlist-box {
        margin: 5px 10px;
        img {
          border-radius: 5px;
          box-shadow: 0 0 1px gainsboro;
          height: 180px;
          width: 100%;
        }
        .box-bottom {
          .box-bottom-1 {
            margin: 5px;
            font-weight: bold;
          }
          .box-bottom-2 {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: smaller;
            color: gray;
            margin: 0 5px;
            .box-bottom-2-right {
              display: flex;
              flex-direction: row;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
</style>
